<template>
  <div>
<ul>
  <li v-for="item in list" :key="item.id" @click="$router.push('/detail/'+item.id)">
      <div><img :src="item.image" alt="" style="width: 100%;"></div>
      <p>{{ item.title }}</p>
      <p>￥{{ item.price }}</p>
  </li>
</ul>
  </div>
</template>

<script setup>
import request from '@/api/request.js'
import { onMounted ,ref } from 'vue'
const list=ref([])
onMounted(() => {
  request.get('/list',{
  params:{pagination:1, pageNum:30 }
}).then(res=>{
  if(res.data.code==200){
      list.value=res.data.data
  }
})
})


</script>

<style lang="scss" scoped>
ul{
  column-count: 2;
  li{
      break-inside: avoid;
  }
}

</style>